<template>
  <div class="novice-wrap clearfix" :style="NoviceStyle" @click.stop="PreventBubbles">
    <div v-for="item in NoviceArr">
      <p v-html="item.title" class="title"></p>
      <div class="img" v-if="webchat"></div>
      <p v-html="item.text" class="content"></p>
    </div>
    <el-button type="text" class="btn-text fr" @click.stop="checkNovice">{{$t('public.Iknow')}}</el-button>
  </div>
</template>
<script>
  // NoviceText 要展示的功能提示，v-html 支持传dom。
  // NoviceKey eg: webchatIntentionality // 在线咨询客户意向度。必传
  // NoviceTitle 功能提示的title， v-html 支持传dom
  // NoviceStyle 功能提示的样式
  export default {
    name: 'NoviceBoot',
    props: {
      NoviceArr: {
        type: Array,
        default: function () {
          return []
        }
      },
      webchat: {type: Boolean, default: false},
      NoviceStyle: {type: String, default: ''},
      NoviceKey: {type: String, default: ''}
    },
    data () {
      return {
      }
    },
    methods: {
      PreventBubbles () {
        console.log('我只是为了阻止冒泡！')
      },
      checkNovice () {
        let data = {key: this.NoviceKey, status: true}
        this.$store.dispatch('updateGuidance', data).then((resp) => {
          if (resp && resp.success) {
//            this.$store.commit('SET_NOVICE_KEY_DICMAP', data)
            let noviceObj = this.$getCache('guidance') || {}
            for (let i in noviceObj) {
              if (i === data.key) {
                noviceObj[i] = data.status
                break
              }
            }
            this.$updateCache('guidance', noviceObj)
            this.$emit('updateGuidanceSuccess', true)
          }
        })
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .novice-wrap
    width 265px
    border 1px solid $c-im-offline
    padding 10px 10px 0
    box-shadow 2px 2px 5px $c-im-offline
    display none
    z-index 100
    text-align center
    background #fff
    border-radius 1px
    .btn-text
      color $c-main
      cursor pointer
      font-size 12px
      font-weight normal
    .title
      margin-bottom 10px
      font-size 14px
      color $cf-gray0
    .content
      font-size 12px
      color $cf-gray5
  .clearfix:after
    display block
</style>

